import { Component } from 'react';
import './form.css'
class Form extends Component {
    state = {
        data: [
            {
                label: '线上活动',
                name: '线上活动',
                checked: true
            },
            {
                label: '推广类',
                name: '推广类',
                checked: false
            },
            {
                label: '线下活动',
                name: '线下活动',
                checked: false
            }
        ],
        title: '前端前景技术发展交流',
        city: '',
        start: '',
        end: '',
        photo: '',
        work: '',
        shang: 1,
        miao: ''
    }

    getname = (e) => {
        this.setState({
            title: e.target.value
        })
    }

    // 下拉框
    handleSelectCity = (e) => {
        // console.log(e.target.value);
        this.setState({
            city: e.target.value
        })
    }
    // 开始时间
    getStarts = (e) => {
        this.setState({
            start: e.target.value
        })
    }

    // 结束时间
    getEnd = (e) => {
        this.setState({
            end: e.target.value
        })
    }
    // 手机号
    getphoto = (e) => {
        this.setState({
            photo: e.target.value
        })
    }
    // 职业
    getwork = (e) => {
        this.setState({
            work: e.target.value
        })
    }
    // 赞助商

    getshang = (e) => {
        this.setState({
            shang: e.target.value
        })
    }

    // 多选框
    getCheaked = (e, index) => {
        console.log(e, index);
        if (e.target.type == 'checkbox') {
            this.state.data[index].checked = !this.state.data[index].checked
        }

        console.log(e.target.name, e.target.value);
        let name = e.target.name
        let value = e.target.value
        this.setState({
            [name]: value
        })
    }

    // 描述
    getmiao = (e) => {
        this.setState({
            miao: e.target.value
        })
    }
    // 提交
    submit = (e) => {
        // console.log(e);
        e.preventDefault()
        console.log(this.state);
    }


    render() {
        return (
            <div className='boxs'>
                <form className='form' onSubmit={this.submit}>
                    <div className="form-box">
                        <div className="form-left">活动名称：</div>
                        <div className="form-right">
                            <input type="text" className='form-name' value={this.state.title} onChange={(e) => { this.getname(e) }} />
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">城市:</div>
                        <div className="form-right">
                            <select className='form-select' value={this.state.city} onChange={this.handleSelectCity}>
                                <option value="shanxi">山西</option>
                                <option value="hainan">海南</option>
                                <option value="shandong">山东</option>
                            </select>
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">日期:</div>
                        <div className="form-right">
                            <input type="date" value={this.state.start} onChange={(e) => { this.getStarts(e) }} /> - <input value={this.state.end} type="date" onChange={(e) => { this.getEnd(e) }} />
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">报名电话:</div>
                        <div className="form-right">
                            <input type="text" placeholder='请输入手机号' className='form-name' value={this.state.photo} onChange={(e) => { this.getphoto(e) }} />
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">允许电话沟通:</div>
                        <div className="form-right">
                           
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">目前职业:</div>
                        <div className="form-right">
                            <input type="text" placeholder='请输入目前职业' className='form-name' value={this.state.work} onChange={(e) => { this.getwork(e) }} />
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">活动类型:</div>
                        <div className="form-right">
                            {
                                this.state.data.map((item, key) => {
                                    return (
                                        <label key={key}>
                                            <input type="checkbox" checked={item.checked} name={item.name} onChange={(e) => this.getCheaked(e, key)} /> {item.label}
                                        </label>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">活动赞助商:</div>
                        <div className="form-right">
                            <label>
                                <input type="radio" value='1' checked={this.state.shang === '1'} onChange={this.getshang} /> 男
                            </label>
                            <label>
                                <input type="radio" value='2' checked={this.state.shang === '2'} onChange={this.getshang} /> 女
                            </label>
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">描述:</div>
                        <div className="form-right">
                            <textarea className='miao' value={this.state.miao} onChange={(e) => { this.getmiao(e) }} cols="30" rows="10"></textarea>
                        </div>
                    </div>
                    <div className="form-box">
                        <div className="form-left">
                            <button type='sumbit'>提交</button>
                        </div>
                        <div className="form-right">
                            <button>重置</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}

export default Form;